<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="sub">是兄弟就来砍我</button>
  </div>
</template>

<script>
export default {
  // 使用 props 接收父组件传递的数据
  // 数组里面写字符串, 字符串就是父组件传递的属性名
  // 接收到数据后, 可以把它们当 data 中的数据来使用
  props: ['title', 'price', 'info', 'id'],
  methods: {
    sub() {
      // 单向数据流: 父组件传递给子组件的数据, 不能直接修改, 如果修改, 父组件收不到数据更新的通知
      // Vue 限制的这个功能
      // Vue 不允许在子组件中修改父组件传递的数据, 因为这样会导致数据操作混乱
      // this.price = this.price - Math.random()
      // 知道当前组件是谁?
      // 为什么要传给子组件 id? 
      // 最终目的: 子传父时, 要携带价格和 id 
      // console.log(this.id)
      // this.$emit() 触发事件, 同时可以传参
      // 参数1: 事件名
      // 参数2 ~ 参数N: 参数
      this.$emit('sayPrice', 2, this.id)
    }
  }
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>